@extends('public.base')
@section('body')
<style>
    .layui-unselect dl {
        max-height: 160px;
    }

    html {
        background-color: #fff;
    }
</style>

<div class="layui-row">
    <form id="main_form" class="layui-form layui-form-pane" action="" method="post" lay-filter="main-form-group">
        <!-- ==================================  隐藏区  ================================== -->
        <!-- ==================================  隐藏区  ================================== -->
        <input type="hidden" name="id" value="">


        <div class="layui-card">
            <div class="layui-tab layui-tab-card" lay-filter="tab_form">
                <ul class="layui-tab-title">
                    <li class="layui-this" lay-id="1">基本设置</li>
                    <li lay-id="2">内容管理</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">

                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-inline">
                                <input type="text" name="list_order" value="50" lay-verify="required|number"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">升序 数字越小越靠前</div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">标题</label>
                            <div class="layui-input-block">
                                <input type="text" name="title" lay-verify="required" autocomplete="off"
                                       placeholder="请输入标题"
                                       class="layui-input" value="">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">摘要</label>
                            <div class="layui-input-block">
                                <input type="text" name="description" autocomplete="off"
                                       placeholder="请输入摘要"
                                       class="layui-input" value="">
                            </div>
                        </div>
                        <!--<div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">开始时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="start_time" id="LAY-component-form-group-date"
                                             placeholder="yyyy-MM-dd HH:mm:ss"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">结束时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="end_time" id="LAY-end-component-form-group-date"
                                           placeholder="yyyy-MM-dd HH:mm:ss"
                                           autocomplete="off" class="layui-input">

                                </div>
                            </div>
                        </div>-->


                        <div class="layui-form-item">
                            <label class="layui-form-label">图片地址</label>
                            <div class="layui-input-inline">
                                <input type="text" name="up_img" autocomplete="off"
                                       placeholder="请输入标题"
                                       class="layui-input upload_wap_img_val" id="upload_wap_img_val"
                                       lay-verify="required" lay-filter="test1">
                            </div>
                            <div class="layui-input-inline">
                                &nbsp;<button type="button" class="layui-btn" id="upload_wap_img">上传图片</button>
                                <button type="button" class="layui-btn " id="upload_wap_img_preview"
                                        onclick="show_one_pic(document.getElementById('upload_wap_img_val').value)">
                                    预览
                                </button>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">跳转网址</label>
                            <div class="layui-input-block">
                                <input type="text" name="link_id" autocomplete="off"
                                       placeholder="请输入跳转网址"
                                       class="layui-input" value="">
                            </div>
                        </div>

                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">是否推荐</label>
                            <div class="layui-input-inline">
                                <input type="checkbox" checked="" name="position"
                                       lay-skin="switch" lay-text="开启|关闭" value="1">
                            </div>
                            <div class="layui-form-mid layui-word-aux">（关闭后， 幻灯片将不显示）</div>
                        </div>
                        <div class="layui-form-item" pane>
                            <label class="layui-form-label">是否可见</label>
                            <div class="layui-input-inline">
                                <input type="checkbox" checked="" name="display"
                                       lay-skin="switch" lay-text="开启|关闭" value="1">
                            </div>
                            <div class="layui-form-mid layui-word-aux">（关闭后， 幻灯片将不显示）</div>
                        </div>

                    </div>

                    <div class="layui-tab-item">
                        <div class="layui-form-item">

                            <div class="layui-form-item layui-form-text">
                                    <textarea id="body" name="body" class="layui-textarea"
                                              style="height: 380px;width:100%;"></textarea>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- 按钮区 -->
        <div class="layui-form-item layui-layout-admin" style="display: none">
            <div class="layui-input-block">

                <div class="layui-footer" style="left: 0;">
                    <button id="form_save" lay-filter="form_save" class="layui-btn"
                            lay-submit="">
                        保存
                    </button>
                    <button id="form_reset" type="button" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </form>
</div>
<script src="{{ADMIN_PATH}}layui/layuiadmin/layui/layui.js"></script>
<script src="{{ADMIN_PATH}}js/admin.common.js"></script>
<link rel="stylesheet" href="{{ADMIN_PATH}}kindeditor/themes/default/default.css" media="all">
<script src="{{ADMIN_PATH}}kindeditor/kindeditor.js?{{time()}}"></script>
<script>

    //========================================== 说明区 ==========================================
    //注意：选项卡tab 依赖 element 模块，否则无法进行功能性操作

    // ==========================  公共变量区  ========================================
    var form_id = 'main_form';
    var save_url =  '{{url('admin/content/article/edit')}}';
    var up_url = '{{url('public/upload/pic')}}';

    // ==========================  全局函数区  ===========================================
    //默认函数，重载当前页面数据，1、页面初始化 2、配合搜索 3、配合post_data等操作的回调，如：编辑或删除完表格的记录后，刷新当前页面等
    function reload_data() {
        layui.use(['table'], function () {
            var table = layui.table;
            table.reload('grid');
        });
    }


    // ==============================  业务处理  ==============================================
    layui.use(['element', 'form'], function () {
        //========================================== layui引用区 ==========================================
        var $ = layui.$
            , form = layui.form
        ;
        //========================================== 页面初始化 ==========================================
        //1、初始化form值:1、后台传来的数据
        var data = JSON.stringify({!!$data!!});
        json_to_form(data, form_id);

        //2、初始化编辑器，需要在 初始化form后面，因为editor要调隐藏域的内容
        //var editor = create_editor('memo');
        var editor = create_editor('body');
        //========================================== 数据提交、元素事件绑定区 ==========================================

        /* 监听提交 */
        form.on('submit(form_save)', function(data){
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            $.post(save_url, data.field, function (res) {
                try {
                    if(res.status==200) {
                        //重新刷新父窗口的数据区
                        parent.layui.table.reload('main-table'); //重载表格
                        parent.layer.close(index); //再执行关闭
                    }else{
                        layer.msg(res.message);
                    }
                } catch (e) {
                    layer.msg("异常");
                }

            }, "json");

            return false;
        });

        //2、表单重置
        $('#form_reset').click(function () {
            /* 因为1、通过json赋值 2、layui需要重新渲染form的一些组件 3、有页面会集成kindeditor ，所以重置表单通过刷新浏览器实现最简便 */
            layer.confirm('确定重载表单吗？', function (index) {
                //1、选择确定后执行的操作
                window.location.reload();

                //2、

                //99、关闭自身窗口，请放在函数内部最后一行
                layer.close(index);

            });
        });

        //========================================== 渲染区 ==========================================
        //表单重新渲染，请保存到最后一行
        //渲染表单
        form.render();

    });

    //=============================================时间选框================================================
    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#LAY-component-form-group-date' //指定元素
            , type: 'datetime'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#LAY-end-component-form-group-date' //指定元素
            , type: 'datetime'
        });
    });
    //上传组件
    layui.use('upload', function () {
        var $ = layui.$
            , form = layui.form
        ;
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#upload_wap_img' //绑定元素
            , url: up_url //上传接口
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(1); //上传loading
            }
            , done: function (res) {
                if (res.error == 0) {
                    var src = res.data.src;
                    $("#upload_wap_img_val").val(src);
                } else {
                    layer.msg(res.msg);
                }
                //上传完毕回调
                layer.closeAll('loading'); //关闭loading
            }
            , error: function () {
                //请求异常回调
                layer.closeAll('loading'); //关闭loading
            }
        });

    });
</script>
@stop